<template>
  <view class="content">
    <view :style="{height: tabHeight + 1 +'px'}">
      <view :class="topFixed?'select-tab-fixed-top':'select-tab'" :style="{height: tabHeight+'px'}">
        <view class="select-tab-item" :style="{width: itemWidth}" v-for="(item,index) in titleList" :key="index" @tap="showMenuClick(index)">
          <text :style="{color:color}">{{item.title}}</text>
          <text class="arrows sl-font" :class="statusList[index].isActive?up:down"></text>
        </view>
      </view>
    </view>
    <popup-layer ref="popupRef" :direction="'bottom'" @close="close" :isTransNav="isTransNav" :navHeight="navHeight" :tabHeight="tabHeight">
      <sl-filter-view :ref="'slFilterView'" :independence="independence" :themeColor="themeColor" :menuList.sync="menuListTemp" ref="slFilterView" @confirm="filterResult"></sl-filter-view>
    </popup-layer>
  </view>

</template>

<script>
import popupLayer from '@/components/sl-filter/popup-layer.vue';
import slFilterView from '@/components/sl-filter/filter-view.vue';
export default {
  components: {
    popupLayer,
    slFilterView
  },
  props: {
    menuList: {
      type: Array,
      default() {
        return []
      }
    },
    themeColor: {
      type: String,
      default() {
        return '#000000'
      }
    },
    color: {
      type: String,
      default() {
        return '#666666'
      }
    },
    independence: {
      type: Boolean,
      default: false
    },
    isTransNav: {
      type: Boolean,
      default: false
    },
    navHeight: {
      type: Number,
      default: 0
    },
    topFixed: {
      type: Boolean,
      default: false
    }
  },

  computed: {
    itemWidth() {
      return 'calc(100%/2)'
    },
    menuListTemp: {
      get() {
        return this.getMenuListTemp();
      },
      set(newObj) {
        return newObj;
      }
    }
  },
  // #ifndef H5
  onReady: function () {
    let arr = [];
    let titleArr = [];
    let r = {};
    for (let i = 0; i < this.menuList.length; i++) {
      arr.push({
        'isActive': false
      });
      // titleArr.push({
      // 	'title': this.menuList[i].title,
      // 	'key': this.menuList[i].key
      // })

      r[this.menuList[i].key] = this.menuList[i].title;

      if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
        titleArr.push({
          'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
          'key': this.menuList[i].key
        })
      } else {
        titleArr.push({
          'title': this.menuList[i].title,
          'key': this.menuList[i].key
        })
      }

    }
    this.statusList = arr;
    this.titleList = titleArr;
    this.tempTitleObj = r;
  },
  // #endif

  // #ifdef H5
  created: function () {
    let arr = [];
    let titleArr = [];
    let r = {};
    for (let i = 0; i < this.menuList.length; i++) {
      arr.push({
        'isActive': false
      });
      // titleArr.push({
      // 	'title': this.menuList[i].title,
      // 	'key': this.menuList[i].key
      // });
      r[this.menuList[i].key] = this.menuList[i].title;

      if (this.menuList[i].reflexTitle && this.menuList[i].defaultSelectedIndex > -1) {
        titleArr.push({
          'title': this.menuList[i].detailList[this.menuList[i].defaultSelectedIndex].title,
          'key': this.menuList[i].key
        })
      } else {
        titleArr.push({
          'title': this.menuList[i].title,
          'key': this.menuList[i].key
        })
      }

    }
    this.statusList = arr;
    this.titleList = titleArr;
    this.tempTitleObj = r;
  },
  // #endif
  data() {
    return {
      down: 'sl-down',
      up: 'sl-up',
      tabHeight: 50,
      statusList: [],
      selectedIndex: '',
      titleList: [],
      tempTitleObj: {}
    };
  },
  methods: {
    getMenuListTemp() {
      let arr = this.menuList;
      for (let i = 0; i < arr.length; i++) {
        let item = arr[i];
        for (let j = 0; j < item.detailList.length; j++) {
          let d_item = item.detailList[j];
          if (j == 0) {
            d_item.isSelected = true
          } else {
            d_item.isSelected = false
          }
        }
      }
      return arr;
    },
    // 重置所有选项，包括默认选项，并更新result
    resetAllSelect(callback) {
      this.$refs.slFilterView.resetAllSelect(function (e) {
        callback(e);
      });
    },
    // 重置选项为设置的默认值，并更新result
    resetSelectToDefault(callback) {
      this.$refs.slFilterView.resetSelectToDefault(function (e) {
        callback(e);
      });
    },
    resetMenuList(val) {
      this.menuList = val;
      this.$emit('update:menuList', val)
      this.$forceUpdate();
      this.$refs.slFilterView.resetMenuList(val)
    },
    showMenuClick(index) {
      this.selectedIndex = index;
      if (this.statusList[index].isActive == true) {
        this.$refs.popupRef.close();
        this.statusList[index].isActive = false
      } else {
        this.menuTabClick(index);
        this.$refs.popupRef.show()
      }
    },
    menuTabClick(index) {
      this.$refs.slFilterView.menuTabClick(index);
      for (let i = 0; i < this.statusList.length; i++) {
        if (index == i) {
          this.statusList[i].isActive = true;
        } else {
          this.statusList[i].isActive = false;
        }
      }
    },
    filterResult(obj) {
      let val = obj.result;
      let titlesObj = obj.titles;
      // 处理选项映射到菜单title
      if (this.independence) {
        if (!this.menuList[this.selectedIndex].isMutiple || this.menuList[this.selectedIndex].isSort) {
          let tempTitle = '';
          for (let i = 0; i < this.menuList[this.selectedIndex].detailList.length; i++) {
            let item = this.menuList[this.selectedIndex].detailList[i];
            if (item.value == val[this.menuList[this.selectedIndex].key]) {
              tempTitle = item.title;
            }
          }
          if (this.menuList[this.selectedIndex].reflexTitle) {
            this.titleList[this.selectedIndex].title = tempTitle;
          }
        }
      } else {
        for (let key in titlesObj) {
          if (!Array.isArray(titlesObj[key])) {
            this.tempTitleObj[key] = titlesObj[key];
          }

        }
        for (let key in this.tempTitleObj) {
          for (let i = 0; i < this.titleList.length; i++) {
            if (this.titleList[i].key == key) {
              this.titleList[i].title = this.tempTitleObj[key];
            }
          }
        }
      }

      this.$refs.popupRef.close()
      if (obj.isReset) {

      } else {
        this.$emit("result", val)
      }


    },
    close() {
      for (let i = 0; i < this.statusList.length; i++) {
        this.statusList[i].isActive = false;
      }
    }
  }
}
</script>

<style>
@import "iconfont/iconfont.css";

.select-tab {
  border-bottom: #f7f7f7 1px solid;
  background-color: #ffffff;
  display: flex;
  width: 100%;
}

.select-tab-fixed-top {
  border-bottom: #f7f7f7 1px solid;
  background-color: #ffffff;
  display: flex;
  width: 100%;
  position: fixed;
  /* #ifdef H5 */
  top: 44px;
  /* #endif */
  /* #ifndef H5 */
  top: 0;
  /* #endif */
}

.arrows {
  margin-left: 5px;
}

.select-tab .select-tab-item,
.select-tab-fixed-top .select-tab-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.select-tab .select-tab-item text,
.select-tab-fixed-top .select-tab-item text {
  color: #666666;
  font-size: 14px;
}
</style>
